<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 重置样式 -->
    <link href="../../asserts/css/reset.css" rel="stylesheet">
    <!-- 字体库 -->
    <link href="../../asserts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 引入首页css -->
    <link href="./index.css" rel="stylesheet">
    <style>
        .tabs {
            position: fixed;
            width: 100%;
            height: var(--tabHeight);
            padding-top: 2px;
            bottom: 0;
            /* background-color: azure; */
            display: flex;
            justify-content: space-between;
            border-top: solid 0.5px rgb(196, 193, 193);
            background-color: rgba(255, 255, 255, 1);

        }


        /** 设置30% 宽度，当剩余有空间的时候 flex-grow: 1; 允许拉伸 这样可以平均分配*/
        .tabs .tab {
            width: 30%;
            height: 100%;
            flex-grow: 1;
            color: #96959A !important;
            font-size: 1.25em;
            text-align: center;
        }

        .tabs .tab i {
            font-size: 1.5em !important;
        }

        /* 当前激活的状态  */
        .tabs .active .caption,
        .tabs .active i {
            color: orange !important;
            font-weight: 500 !important;
        }
    </style>

</head>

<body>
    <div class="container_home">

        <div class="tabs">
            <div class="tab active">
                <div><i class="fa fa-home icon"></i></div>
                <div class="caption">首页</div>
            </div>
            <div class="tab">
                <div><i class="fa fa-indent icon"></i></div>
                <div>订单</div>
            </div>
            <div class="tab">
                <div><i class="fa fa-user-o icon"></i></div>
                <div>我的</div>
            </div>
        </div>

    </div>


</body>

</html>